<script setup lang="ts">

</script>

<template>
  <div class="pt-20">
    <!-- Equipment Header -->
    <section class="bg-gradient-to-r text-white section-padding from-green-600 to-blue-600">
      <div class="container-max">
        <nav class="text-sm mb-6 opacity-80">
          <NuxtLink to="/" class="hover:text-white">
            首页
          </NuxtLink>
          <span class="mx-2">/</span>
          <NuxtLink to="/products" class="hover:text-white">
            产品中心
          </NuxtLink>
          <span class="mx-2">/</span>
          <span>整线设备</span>
        </nav>
        <h1 class="text-4xl font-bold mb-6 md:text-5xl">
          整线设备
        </h1>
        <p class="text-xl max-w-3xl">
          EVA整线设备配备，为企业打造科技新工厂，提供一站式智能制造解决方案
        </p>
      </div>
    </section>

    <!-- Equipment Solutions -->
    <section class="section-padding">
      <div class="container-max">
        <!-- Solution Overview -->
        <div class="mb-16 text-center">
          <h2 class="text-3xl title-gradient font-bold mb-6">
            整线解决方案
          </h2>
          <p class="text-xl text-gray-600 mx-auto max-w-4xl">
            为企业打造科技新工厂，共促发展可持续。提供一站式方案解决，兼容性、柔性解决方案，智能制造、信息化布局
          </p>
        </div>

        <!-- Three Key Features -->
        <div class="mb-16 gap-8 grid md:grid-cols-3">
          <div class="p-8 text-center rounded-lg bg-white shadow-lg">
            <div class="mx-auto mb-6 rounded-full bg-blue-100 flex h-20 w-20 items-center justify-center">
              <span class="text-3xl">🎯</span>
            </div>
            <h3 class="text-xl font-bold mb-4">
              一站式方案解决
            </h3>
            <ul class="text-gray-600 text-left space-y-2">
              <li>• <strong>精准服务</strong>，聚焦落实 省心</li>
              <li>• <strong>定制要求</strong>，整体响应 省时</li>
              <li>• <strong>大小方案</strong>，任意组合 省力</li>
            </ul>
          </div>

          <div class="p-8 text-center rounded-lg bg-white shadow-lg">
            <div class="mx-auto mb-6 rounded-full bg-green-100 flex h-20 w-20 items-center justify-center">
              <span class="text-3xl">🔧</span>
            </div>
            <h3 class="text-xl font-bold mb-4">
              兼容性、柔性解决方案
            </h3>
            <ul class="text-gray-600 text-left space-y-2">
              <li>• <strong>多种电池尺寸</strong>，多种组件版型</li>
              <li>• <strong>多工艺兼容</strong>，可根据不同工艺路线定制</li>
              <li>• <strong>应对薄片</strong>，传输方式柔性互联</li>
            </ul>
          </div>

          <div class="p-8 text-center rounded-lg bg-white shadow-lg">
            <div class="mx-auto mb-6 rounded-full bg-purple-100 flex h-20 w-20 items-center justify-center">
              <span class="text-3xl">🤖</span>
            </div>
            <h3 class="text-xl font-bold mb-4">
              智能制造、信息化布局
            </h3>
            <ul class="text-gray-600 text-left space-y-2">
              <li>• <strong>数据统一</strong> 规范统一</li>
              <li>• <strong>接口统一</strong></li>
              <li>• <strong>互联专家</strong>：红外焊接/电磁焊接</li>
            </ul>
          </div>
        </div>

        <!-- Equipment Details -->
        <div class="space-y-16">
          <!-- High-Speed Equipment -->
          <div class="rounded-lg bg-white shadow-lg overflow-hidden">
            <div class="grid lg:grid-cols-2">
              <div class="p-8 lg:p-12">
                <h3 class="text-2xl title-gradient font-bold mb-6">
                  整线智能封装高速互联
                </h3>
                <div class="mb-6 space-y-4">
                  <div class="flex items-center">
                    <span class="mr-3 rounded-full bg-blue-600 h-3 w-3" />
                    <span>高速无损划片</span>
                  </div>
                  <div class="flex items-center">
                    <span class="mr-3 rounded-full bg-blue-600 h-3 w-3" />
                    <span>划焊联体高速串焊机</span>
                  </div>
                  <div class="flex items-center">
                    <span class="mr-3 rounded-full bg-blue-600 h-3 w-3" />
                    <span>高速叠焊机</span>
                  </div>
                  <div class="flex items-center">
                    <span class="mr-3 rounded-full bg-blue-600 h-3 w-3" />
                    <span>高速排版机</span>
                  </div>
                  <div class="flex items-center">
                    <span class="mr-3 rounded-full bg-blue-600 h-3 w-3" />
                    <span>高速串焊机</span>
                  </div>
                </div>
                <p class="text-gray-600 mb-6">
                  整线智能封装设备采用高速互联技术，实现无损划片、高速串焊、智能叠焊等多个工艺流程的完美集成。
                </p>
                <button class="btn-primary">
                  了解详情
                </button>
              </div>
              <div class="bg-gradient-to-br h-64 from-blue-400 to-purple-500 lg:h-auto" />
            </div>
          </div>

          <!-- Spare Parts -->
          <div class="rounded-lg bg-white shadow-lg overflow-hidden">
            <div class="grid lg:grid-cols-2">
              <div class="bg-gradient-to-br h-64 order-2 from-green-400 to-blue-500 lg:h-auto lg:order-1" />
              <div class="p-8 order-1 lg:p-12 lg:order-2">
                <h3 class="text-2xl title-gradient font-bold mb-6">
                  整线备品备件
                </h3>
                <div class="mb-6 space-y-4">
                  <div class="p-4 rounded-lg bg-gray-50">
                    <div class="text-green-900 font-bold mb-2">
                      服务特色
                    </div>
                    <div class="text-sm gap-2 grid grid-cols-2">
                      <div>• 及时：24小时技术对接</div>
                      <div>• 高效：应急备件快速协调</div>
                      <div>• 稳定：为企业降本增效</div>
                      <div>• 定制：非标件专业定制化</div>
                    </div>
                  </div>
                </div>
                <p class="text-gray-600 mb-6">
                  截至2025年3月31日，公司累计统计备品备件10000+品种，
                  其中串焊机的焊机皮带、压网工装与多个企业进行了试用并采购。
                </p>
                <div class="flex space-x-4">
                  <button class="btn-primary">
                    咨询备件
                  </button>
                  <button class="btn-outline">
                    下载目录
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Technical Specifications -->
    <section class="section-padding bg-gray-50">
      <div class="container-max">
        <h2 class="text-3xl title-gradient font-bold mb-12 text-center">
          技术规格
        </h2>

        <div class="rounded-lg bg-white shadow-lg overflow-hidden">
          <div class="overflow-x-auto">
            <table class="w-full">
              <thead class="bg-gray-50">
                <tr>
                  <th class="font-semibold px-6 py-4 text-left">
                    设备名称
                  </th>
                  <th class="font-semibold px-6 py-4 text-left">
                    技术参数
                  </th>
                  <th class="font-semibold px-6 py-4 text-left">
                    产能
                  </th>
                  <th class="font-semibold px-6 py-4 text-left">
                    特色功能
                  </th>
                </tr>
              </thead>
              <tbody class="divide-gray-200 divide-y">
                <tr>
                  <td class="font-medium px-6 py-4">
                    高速串焊机
                  </td>
                  <td class="px-6 py-4">
                    156~230mm电池
                  </td>
                  <td class="px-6 py-4">
                    3600片/小时
                  </td>
                  <td class="px-6 py-4">
                    划焊联体，AI检测
                  </td>
                </tr>
                <tr>
                  <td class="font-medium px-6 py-4">
                    无损划片机
                  </td>
                  <td class="px-6 py-4">
                    激光划片技术
                  </td>
                  <td class="px-6 py-4">
                    4000片/小时
                  </td>
                  <td class="px-6 py-4">
                    无损切割，精度高
                  </td>
                </tr>
                <tr>
                  <td class="font-medium px-6 py-4">
                    叠焊机
                  </td>
                  <td class="px-6 py-4">
                    多工艺兼容
                  </td>
                  <td class="px-6 py-4">
                    2800片/小时
                  </td>
                  <td class="px-6 py-4">
                    柔性传输，智能控制
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>

</style>
